<template>
    <div>
        <Form :label-width="130" inline>
            <Row>
                <i-col span="6">
                    <Form-item label="查询批次：">
                        <Input v-model="queryParam.ssfk0002" placeholder="请选择查询批次" style="width:200px"
                               @on-focus="clickSsfk0002"/>
                    </Form-item>
                </i-col>
                <i-col span="6">
                    <Form-item label="查询救助年月:">
                        <DatePicker v-model="queryParam.ssfk0011" type="month" placeholder="请选择救助年月"
                                    style="width: 200px"  :editable="false"></DatePicker>

                    </Form-item>
                </i-col>
            </Row>
        </Form>
        <Row class="button_row">
            <span style="float: left;">
            <Upload action="/api/ac/subsistence/Ss20001Service/createAndImportExcel" accept=".xls"
                    style="display: inline-block;" :data="uploadData"
                    :on-success="onSuccess" :before-upload="beforeUpload" :on-error="onError"
                    name="files">
                <Button type="primary" icon="ios-cloud-upload-outline">导入</Button>
            </Upload>
            <Button type="primary" icon="ios-cloud-download-outline" @click="exportTemplate" class="button_item_left">
                下载模版
            </Button>
            <Button type="primary" icon="ios-cloud-download-outline" @click="exportE" class="button_item_left">
                导出
            </Button>
            </span>
            <span style="float: right;">
                 <Button type="primary" @click="searchQuery">查询</Button>
                 <Button type="primary" class="button_item_left" @click="searchReset">重置</Button>
            </span>
        </Row>
        <div class="table_div">
            <vxe-table border
                       auto-resize
                       row-id="id"
                       :row-key="true"
                       show-overflow="tooltip"
                       highlight-hover-row
                       align="center"
                       header-align="center"
                       ref="xTree"
                       :loading="Loading"
                       :data="tableData">
                <vxe-table-column field="ssfk0003" title="导入姓名" align="center" width='100' fixed="left"/>
                <vxe-table-column field="ssfk0012" title="系统姓名" align="center" width='100' fixed="left"/>
                <vxe-table-column field="ssfk0004" title="证件号码" align="center" width='200' fixed="left"/>
                <vxe-table-column field="ssfk0001" title="发起批量查询区划" width='150' align="center"/>
                <vxe-table-column field="ssfk0002" title="查询批次" width='150' align="center"/>
                <vxe-table-column field="ssfk0008" title="所属县区" width='100' align="center"/>
                <vxe-table-column field="ssfk0009" title="所属乡镇街道" width='120' align="center"/>
                <vxe-table-column field="ssfk0010" title="所属社区村" width='100' align="center"/>
                <vxe-table-column field="ssfk0005" title="导入时间" width='200' align="center"
                                  :formatter="renderDetailTime"/>
                <vxe-table-column field="ssfk0011" title="查询救助年月" width='120' align="center" :formatter="renderTime"/>
                <vxe-table-column field="ssfk0007" title="救助情况" width="500" align="center"/>
            </vxe-table>
            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                  @on-change="handleTableChange" :current="pageNo"></Page>
        </div>
        <ss20001-modal ref="modalForm" @choose="chooseSsfk0002"/>
    </div>

</template>

<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'

    import ss20001Modal from './modules/ss20001Modal'

    export default {
        name: "ss20002-list",
        mixins: [CommonMixin],
        components: {
            ss20001Modal
        },
        data() {
            return {
                queryParam: {
                    ssfk0002: ""
                },
                Loading: true,
                uploadData: {},
                url: {
                    list: "/api/ac/subsistence/Ss20001Service/page",
                    exportTemplate: "/api/ac/subsistence/Ss20001Service/exportTemplate",
                    exportExcel: "/api/ac/subsistence/Ss20001Service/export",

                },
                exportTemplateFileName: "低保数据批量对比查询数据模版",
                exportFileName: "低保数据批量对比查询数据",
            }
        },
        methods: {
            beforeUpload() {
                this.uploadData.ssfk0011 = this.DateFormat(this.queryParam.ssfk0011, 'YYYY-MM');
                if (!this.queryParam.ssfk0011) {
                    this.$Message.error("请选择查询救助年月！");
                    return false;
                }
                this.Loading = true;
                return true;
            },
            onSuccess() {
                this.$Message.success("上传成功！");
                this.Loading = false;
                this.uploadData = {};
            },
            clickSsfk0002() {
                this.$refs.modalForm.edit();
                this.$refs.modalForm.key = this.uuid();
            },
            chooseSsfk0002(e) {
                if (e) {
                    this.queryParam.ssfk0002 = e;
                    this.loadData(1);
                } else {
                    this.queryParam.ssfk0002 = "";
                    this.tableData = [];
                }

            },
            exportE() {
                this.url.exportExcel = "/api/ac/subsistence/Ss20001Service/export";
                if (!this.queryParam.ssfk0002) {
                    this.$Message.error("请选择查询批次！");
                } else {
                    this.exportExcel();
                }
            },

            searchQuery() {
                if (!this.queryParam.ssfk0002) {
                    this.$Message.error("请选择查询批次！");
                } else {
                    this.queryParam.islast = "";
                    this.loadData(1);
                }
            },

        },
        created() {
            this.loadData();
        },
    }
</script>

<style scoped>
    .paging {
        float: right;
        margin-top: 10px;
    }

    /deep/ .ivu-upload-list {
        display: none;
    }

    /deep/ .ivu-table-cell {
        padding-right: 0px;
        padding-left: 0px;
    }

    /deep/ #area .ivu-col-span-8 {
        width: 50%;
    }

    #area :nth-child(3) {
        display: none;
    }
</style>
